<template>
  <div>
    <div>
      <span>请选择日期：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" size="small" @click="submit()">确认</el-button>
    </div>
    <div>
      <div style="display: flex; margin-top: 30px">
        <div style="width: 50%">
          <div id="deviceLocationForAdmin" style="width: 100%; height: 400px"></div>
        </div>
        <div style="width: 50%;">
          <div id="userIdentityForAdmin" style="width: 100%; height: 400px"></div>
        </div>
      </div>

      <div style="display: flex; margin-top: 50px">
        <div style="width: 50%;">
          <div id="lightIntensityForAdmin" style="width: 100%; height: 400px"></div>
        </div>
        <div style="width: 50%;">
          <div id="temperatureHumidityForAdmin" style="width: 100%; height: 400px"></div>
        </div>
      </div>

      <div style="display: flex; margin-top: 50px">
        <div style="width: 50%;">
          <div id="COForAdmin" style="width: 100%; height: 400px"></div>
        </div>
        <div style="width: 50%;">
          <div id="airQualityForAdmin" style="width: 100%; height: 400px"></div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>

import request from "@/utils/request";
import * as echarts from 'echarts';

export default {
  data() {
    return {
      params: {
        past: '',
      },
      options: [{
        value: 3,
        label: '前3天'
      }, {
        value: 5,
        label: '前5天'
      }, {
        value: 7,
        label: '前7天'
      }],
      value: 3,
    };
  },
  mounted() {
    this.params.past = 3;
    this.initEcharts();
  },
  methods: {
    //初始化饼状图数据
    initEcharts() {
      request.get("Devices/echarts/pie").then(res => {
        if (res.code === '0') {
          this.initDeviceLocation(res.data);
          console.log(res.data);
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("Users/echarts/bar").then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initUserIdentity(map.xAxis, map.yAxis);
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("THS/echarts/initLineForAdmin", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initTemperatureHumidity(map.xAxis, map.temperature, map.humidity);
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("LS/echarts/initLineForAdmin", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initLightIntensity(map.xAxis, map.yAxis);
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("CoS/echarts/initLineForAdmin", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initCO(map.xAxis, map.yAxis);
        } else {
          this.$message.error(res.msg);
        }
      });
      request.get("AQS/echarts/initLineForAdmin", {params: this.params}).then(res => {
        if (res.code === '0') {
          let map = res.data;
          this.initAirQuality(map.xAxis, map.yAxis);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //饼状图
    initDeviceLocation(data) {
      const dom = document.getElementById('deviceLocationForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#deviceLocationForAdmin');
        return;
      }
      const myChart = echarts.init(dom);

      const option = {
        title: {
          text: '设备数据统计',
          subtext: '统计维度：设备位置',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '设备位置',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    //柱状图
    initUserIdentity(xAxis, yAxis) {
      const dom = document.getElementById('userIdentityForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#userIdentityForAdmin');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data: yAxis
          }
        ]
      };
      myChart.setOption(option);
    },
    //温湿度图表
    initTemperatureHumidity(xAxis, temperature, humidity) {
      const dom = document.getElementById('temperatureHumidityForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#temperatureHumidityForAdmin');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '温湿度'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '湿度']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis
        },
        yAxis: [
          {
            type: 'value',
            name: '温度 (°C)',
            min: 0,
            max: 40,
            position: 'left',
            axisLabel: {
              formatter: '{value} °C'
            }
          },
          {
            type: 'value',
            name: '湿度 (%)',
            min: 0,
            max: 100,
            position: 'right',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            data: temperature,
            yAxisIndex: 0  // 使用第一个 y 轴
          },
          {
            name: '湿度',
            type: 'line',
            data: humidity,
            yAxisIndex: 1  // 使用第二个 y 轴
          }
        ]
      };
// 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },

    initLightIntensity(xAxis, yAxis) {
      const dom = document.getElementById('lightIntensityForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#lightIntensityForAdmin');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '光照强度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis
        },
        yAxis: {
          type: 'value',
          name: '光照强度 (lux)',
          axisLabel: {
            formatter: '{value} lux'
          }
        },
        series: [
          {
            name: '光照强度',
            type: 'bar',
            data: yAxis
          }
        ]
      };

// 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);

    },

    initCO(xAxis, yAxis) {
      const dom = document.getElementById('COForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#COForAdmin');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '一氧化碳监测',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CO']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis
        },
        yAxis: {
          type: 'value',
          name: '数值'
        },
        series: [
          {
            name: 'CO',
            type: 'line', // CO2 用折线图
            data: yAxis, // CO2 数据
            itemStyle: {
              color: '#3498db'
            }
          }
        ]
      };
      myChart.setOption(option);
    },

    initAirQuality(xAxis, yAxis) {
      const dom = document.getElementById('airQualityForAdmin');
      if (!dom) {
        console.error('DOM 不存在：#airQualityForAdmin');
        return;
      }
      const myChart = echarts.init(dom);
      const option = {
        title: {
          text: '甲烷监测',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CO']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: xAxis
        },
        yAxis: {
          type: 'value',
          name: '数值'
        },
        series: [
          {
            name: 'HCHO',
            type: 'line',
            data: yAxis,
            itemStyle: {
              color: '#3498db'
            }
          }
        ]
      };
      myChart.setOption(option);
    },

    submit() {
      this.params.past = this.value;
      console.log("past:", this.params.past);
      this.initEcharts();
    }
  }
}
</script>
